<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步之数据请求</title>
</head>
<body>
    <ul id="posts">

    </ul>
    <script>
        let posts = [];
        let users = [];

        // 封装 dry
        function ajax(url,cb) {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.addEventListener('readystatechange', function(event) {
                if (event.target.readyState === 4) {
                    let data = JSON.parse(event.target.responseText);
                    // 嵌套
                    console.log(data);
                    cb();
                }
            })
        }
        // 使用回调函数技巧，实现异步任务嵌套，异步任务 同步化，控制代码的执行流程
        ajax('http://127.0.0.1:3000/posts',() => {
            ajax('http://127.0.0.1:3001/users',() => {
                ajax('http://127.0.0.1:3000/posts/1',()=>{
                    console.log('The Work is over');
                })
                
            })
        })

        // 由异步变同步
        // fetch('http://127.0.0.1:3000/posts')
        //     .then(data => data.json()) 
        //     .then(data => {
        //         // console.log(data);
        //         posts = [...data]; // 扩展运算符  解构
        //         fetch('http://127.0.0.1:3001/users')
        //             .then(data => data.json()) 
        //             .then(data => {
        //                 users = [...data]
        //                 console.log(posts,users,'----------');
        //         })
        //     })
        
        // 前端拉取数据API      xhr 对象
        // const xhr = new XMLHttpRequest();
        // xhr.open("GET", "http://127.0.0.1:3000/posts", true);
        // xhr.send(); // 发送请求
        // // http 请求响应式
        // xhr.addEventListener('readystatechange', function(event) {
        //     console.log(event.target.responseText);
        //     if (event.target.readyState === 4) { // 数据全部到达了 数据返回时是字符串文本
        //         document.getElementById('posts').innerHTML = 
        //         JSON.parse(event.target.responseText).map(item =>` // 对象字面量类型的字符串，可以使用JSON.parse将其转化为数组
        //             <li>
        //                 ${item.id} ${item.title} ${item.author} 
        //             </li>
        //         `)
        //         .join('')
        //     }
        // })
        // fetch('http://127.0.0.1:3000/posts') // 异步操作
        //     // 得到二进制文件流
        //     .then(data => data.json()) // 将二进制文件流格式转成json文件
        //     .then(data => {
        //         console.log(data)
        //     })
        // console.log('---------')
    </script>
</body>
</html>